গ্রিড সিস্টেম এবং ফ্লেক্সবক্স

Web Development - ওয়েব ডেভেলপার্স (Web Developers Guide) - রেসপনসিভ এবং মোবাইল-ফার্স্ট ডিজাইন

185

গ্রিড সিস্টেম (Grid System) কী?

গ্রিড সিস্টেম একটি লেআউট স্ট্রাকচার যা ওয়েব পৃষ্ঠায় কন্টেন্টকে সঠিকভাবে সাজানোর জন্য সারি (rows) এবং কলাম (columns) ব্যবহার করে। এটি ওয়েব ডিজাইনে একটি রেগুলার প্যাটার্ন তৈরি করে, যেখানে বিভিন্ন ডিভ (div) বা কন্টেন্ট একে অপরের সাথে আলাইন (align) হয়ে প্রদর্শিত হয়। গ্রিড সিস্টেমের মাধ্যমে ওয়েব ডিজাইনকে আরো সংগঠিত, রেসপন্সিভ এবং ইউজার ফ্রেন্ডলি করা সম্ভব হয়।

গ্রিড সিস্টেম সাধারণত ১২ কলামের মডেল ব্যবহার করে থাকে, তবে এটি আপনার প্রয়োজন অনুযায়ী পরিবর্তনযোগ্য।

গ্রিড সিস্টেমের কাজ:

সারি (Rows): সারি হলো অনুভূমিক লাইন যা ওয়েব পৃষ্ঠায় কন্টেন্টের ব্লকগুলোকে ভাগ করে রাখে।
কলাম (Columns): কলাম হলো উল্লম্ব লাইন যা বিভিন্ন কন্টেন্টকে গঠন করে।

Bootstrap এবং Foundation দুটি জনপ্রিয় ফ্রেমওয়ার্ক, যা গ্রিড সিস্টেম ব্যবহার করে। তবে, CSS Grid ব্যবহার করেও নিজস্ব গ্রিড সিস্টেম তৈরি করা সম্ভব।

CSS Grid উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* ৩টি কলাম */
            gap: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

</body>
</html>

এখানে, .container কনটেইনারটির মধ্যে ৩টি সমান কলাম তৈরি করা হয়েছে, এবং প্রতিটি .item এ কন্টেন্ট রয়েছে।

ফ্লেক্সবক্স (Flexbox) কী?

ফ্লেক্সবক্স (Flexible Box Layout) একটি CSS মডেল যা ওয়েব পৃষ্ঠায় কন্টেন্টকে একে অপরের সাথে ফ্লেক্সিবলি সাজাতে ব্যবহৃত হয়। ফ্লেক্সবক্স মূলত একমাত্রিক (1D) লেআউট মডেল, যা কন্টেন্টকে এক্স (horizontal) অথবা ওয়াই (vertical) এক্সিসে সহজেই সাজাতে সহায়তা করে।

ফ্লেক্সবক্সের মাধ্যমে আপনি কন্টেন্টের অ্যালাইনমেন্ট, স্পেসিং এবং অর্ডার খুব সহজে নিয়ন্ত্রণ করতে পারেন।

ফ্লেক্সবক্সের প্রধান বৈশিষ্ট্যসমূহ:

Flex Container: এটি হলো সেই কন্টেইনার যেখানে ফ্লেক্স আইটেমগুলি থাকে। display: flex; দিয়ে এটি নির্ধারণ করা হয়।
Flex Items: ফ্লেক্স কন্টেইনারের ভিতরে থাকা কন্টেন্ট।
Flex Direction: এটি কন্টেন্টকে কোন দিক থেকে সাজাবে তা নির্ধারণ করে (যেমন, row বা column).
Justify Content: ফ্লেক্স আইটেমগুলোকে অনুভূমিকভাবে (horizontal) সেন্টার, স্পেস বটম, বা বাকি স্পেস অনুযায়ী সাজানোর জন্য ব্যবহার হয়।
Align Items: ফ্লেক্স আইটেমগুলোকে উল্লম্বভাবে (vertical) সেন্টার বা অন্য কোন অবস্থানে অ্যালাইন করে।

Flexbox উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* আইটেমগুলোর মধ্যে জায়গা দিয়ে সাজানো */
            align-items: center; /* আইটেমগুলোর উল্লম্ব অ্যালাইনমেন্ট */
            height: 100vh;
        }
        .item {
            background-color: lightgreen;
            padding: 20px;
            text-align: center;
            width: 100px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

</body>
</html>

এখানে, .container ফ্লেক্স কন্টেইনার এবং .item গুলি ফ্লেক্স আইটেম। justify-content: space-between; দ্বারা আইটেমগুলো মাঝে জায়গা দিয়ে আলাইন করা হয়েছে, এবং align-items: center; দ্বারা উল্লম্বভাবে সেন্টার করা হয়েছে।